<template>
    <el-button type="primary" class="github-button" @click="loginWithGitHub">
      <i class="fab fa-github github-icon"></i> 登录 GitHub
    </el-button>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import axios from 'axios';
  
  function loginWithGitHub() {
    // 请求后端的 GitHub 登录端点，后端会重定向到 GitHub 登录页面
    window.location.href = 'http://localhost:3000/author'; // 替换为后端登录接口的实际地址
  }
  </script>
  
  <style scoped>
  .github-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .github-icon {
    width: 20px; /* 设置图标宽度为20px */
    height: 20px; /* 设置图标高度为20px */
    margin-right: 8px;
  }
  
  .github-button:hover {
    background-color: #555;
  }
  </style>
  